<!--  -->
<template>
  <div class="apply-refund">
      <!-- <HeaderTop title="申请退款"></HeaderTop> -->
      <div class="refund-reason">
        <div class="refund-reason-title">
            <h3>退货原因</h3>
            <p>订单编号：<span>{{orderNum}}</span></p>
        </div>
        <van-radio-group v-model="radio" class="refund-reason-raido">
            <van-radio name="1" ref="">质量问题</van-radio>
            <van-radio name="2">物流速度太慢</van-radio>
            <van-radio name="3">不想要了</van-radio>
            <van-radio name="4" class="last">其他原因</van-radio>
        </van-radio-group>
      </div>
      <div class="refund-talk">
          <div class="refund-talk-title">有话要说</div>
          <!-- <textarea class="text" placeholder="请填写您要退货的详细原因"></textarea> -->
          <group>
            <x-textarea :max="200" v-model="cause" placeholder="请填写您要退货的详细原因"></x-textarea>
          </group>
      </div>
      <div class="refund-btn">
          <button @click="applyRefund">提交申请</button>
      </div>
  </div>
</template>

<script>
// import HeaderTop from "../HeaderTop/HeaderTop"
import { XTextarea,Group } from 'vux'
import {mapState} from 'vuex'
export default {
    data () {
        return {
            radio:'1',
            orderNum:null,
            orderInfoId:null,
            userId:null,
            token:null,
            // handlingWay:'',
            cause:''
        };
    },

    components: {
        // HeaderTop,
        XTextarea,
        Group
    },

    computed: {
        ...mapState(['userInfo'])
    },
    async mounted(){
        this.orderInfoId = this.$route.query.id
        this.userId = this.userInfo.userInfo.id
        this.token = this.userInfo.token
        // console.log(this.orderInfoId,this.userId,this.token)
        // 获取订单详情中的订单编号
        const result = await this.API.reqOrderDetail({userId:this.userId,token:this.token,orderInfoId:this.orderInfoId})
        if(result.retCode === '000'){
            this.orderNum = result.retData.orderInfo.orderNo
        }
    },
    methods: {
        async applyRefund(){
            console.log('申请退款')
            const {userId,token,orderInfoId,radio,cause} = this
            console.log(userId,token,orderInfoId,radio,cause)
            const result =await this.API.reqApplyRefund({userId,token,orderId:orderInfoId,handlingWay:radio,cause},'POST')
            console.log(result)
            if(result.retCode === '000'){
                this.$toast('提交成功');
                this.$router.push({path:'/myorder',query:{id:0}})
            }
            if(result.retCode !== '000'){
                this.$toast(result.retData);
            }
        },
    }
}

</script>

<style lang='stylus'>
    .van-radio
        height 40px
        line-height 40px
        margin 0 20px
        border-bottom 1px dashed #eeeeee
        color #999999
        .van-radio__input
            position relative
            font-size 12px
            height 40px
            padding-left 5px
        .van-icon-checked
            color: #145B3E;
    .vux-x-textarea.weui-cell
        border 1px solid #EEEEEE
        .weui-textarea
            font-size 14px
        .weui-textarea-counter
            font-size 12px
</style>

<style lang='stylus' scoped>
@import "../../common/stylus/mixins.styl"
.apply-refund
    padding-bottom 0 !important
    width 100%
    height 100%
    background #fff
    .refund-reason
        // top-border-1px(#E8E8E8)
        .refund-reason-title
            height 50px
            display flex
            justify-content space-between
            align-items center
            bottom-border-1px(#EEEEEE)
            h3  
                font-size 16px
                font-weight bold
                margin-left 15px
            p
                color #999999
                font-size 14px
                margin-right 15px
        .refund-reason-raido
            font-size 14px
            .last
                border none
    .refund-talk
        top-border-1px(#E8E8E8)
        text-align center
        padding 0 15px
        font-size 16px
        .refund-talk-title
            height 45px
            line-height 45px
            font-weight bold
            text-align left
            margin-bottom -10px
        // .text
        //     height 75px
        //     width 92%
        //     resize none 
        //     font-size 14px
        //     padding 15px 10px
        //     border 1px solid #EEEEEE
    .refund-btn
        margin-top 30px
        display flex
        justify-content center
        button
            outline none
            border: 1px solid transparent
            height 47px
            line-height 47px
            width 305px
            font-size 14px
            background #145B3E
            color #ffffff
            border-radius 30px
</style>